<template>
  <div class="allTreasure">
    <!--  顶部导航  -->
    <van-nav-bar class="header" title="全部宝贝" left-arrow>
      <van-icon name="search" slot="right" />
    </van-nav-bar>

    <!-- 下拉菜单 -->
    <div class="dropdown_menu">
      <van-dropdown-menu
        active-color="#ee0a24"
        class="dropdown_menu_navigation"
      >
        <van-dropdown-item
          class="ropdown_menu_item"
          title="物品型号"
          ref="item1"
        >
          <div class="top_select_item">
            <van-radio-group
              v-model="radio"
              class="select_group"
              @change="topSelect"
            >
              <van-radio
                v-for="(item, index) in typeSelectItem"
                :key="index"
                :name="index"
              >
                <span
                  class="item_tag"
                  slot="icon"
                  slot-scope="props"
                  :class="props.checked ? 'item_tag_checked' : ''"
                  >{{ item.value }}</span
                >
              </van-radio>
            </van-radio-group>
          </div>
          <div class="bottom_select_item">
            <van-tree-select
              active-color="#ee0a24"
              :items="items"
              :active-id.sync="activeId"
              :main-active-index.sync="activeIndex"
              @click-nav="clickNav"
              @click-item="clickItem"
            />
          </div>
          <div class="bottom_btn">
            <van-button
              class="reset select_btn"
              type="default"
              @click="resetBtn1"
              >重置</van-button
            >
            <van-button
              class="confirm select_btn"
              type="default"
              @click="confirmBtn1"
              >确认</van-button
            >
          </div>
        </van-dropdown-item>

        <van-dropdown-item
          class="ropdown_menu_item"
          title="物品等级"
          ref="item2"
        >
          <van-radio-group v-model="gradeSelect" class="class_select_content">
            <van-cell-group class="class_select_group">
              <van-cell
                class="class_select_item"
                title="全部"
                clickable
                @click="gradeSelect = 'All'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="All"
                />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="A"
                clickable
                @click="gradeSelect = 'A'"
              >
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="A" />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="B+2"
                clickable
                @click="gradeSelect = 'B+2'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="B+2"
                />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="C"
                clickable
                @click="gradeSelect = 'C'"
              >
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="C" />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="D"
                clickable
                @click="gradeSelect = 'D'"
              >
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="D" />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="E+2"
                clickable
                @click="gradeSelect = 'E+2'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="E+2"
                />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="F+2"
                clickable
                @click="gradeSelect = 'F+2'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="F+2"
                />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
          <div class="bottom_btn">
            <van-button
              class="reset select_btn"
              type="default"
              @click="resetBtn2"
              >重置</van-button
            >
            <van-button
              class="confirm select_btn"
              type="default"
              @click="confirmBtn2"
              >确认</van-button
            >
          </div>
        </van-dropdown-item>

        <van-dropdown-item
          class="ropdown_menu_item"
          title="物品状态"
          ref="item3"
        >
          <van-radio-group v-model="goodsState" class="class_select_content">
            <van-cell-group class="class_select_group">
              <van-cell
                class="class_select_item"
                title="全部状态"
                clickable
                @click="gradeSelect = '1'"
              >
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="1" />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="待支付（0）"
                clickable
                @click="gradeSelect = '待支付（0）'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="待支付（0）"
                />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="待发货（0）"
                clickable
                @click="gradeSelect = '待发货（0）'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="待发货（0）"
                />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="待收货（0）"
                clickable
                @click="gradeSelect = '待收货（0）'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="待收货（0）"
                />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="已收货（0）"
                clickable
                @click="gradeSelect = '已收货（0）'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="已收货（0）"
                />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="已退货（0）"
                clickable
                @click="gradeSelect = '已退货（0）'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="已退货（0）"
                />
              </van-cell>

              <van-cell
                class="class_select_item"
                title="已取消（0）"
                clickable
                @click="gradeSelect = '已取消（0）'"
              >
                <van-radio
                  checked-color="#FF3B3E"
                  slot="right-icon"
                  name="已取消（0）"
                />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
          <div class="bottom_btn">
            <van-button
              class="reset select_btn"
              type="default"
              @click="resetBtn3"
              >重置</van-button
            >
            <van-button
              class="confirm select_btn"
              type="default"
              @click="confirmBtn3"
              >确认</van-button
            >
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <div class="section">
      <div
        class="treasure_container"
        v-for="(item, index) in treasureList"
        :key="index"
      >
        <div class="treasure_item_top">
          <span class="treasure_number"> 物品编号: {{ item.number }} </span>
          <i class="treasure_state">{{ item.state }}</i>
        </div>
        <div class="treasure_item_middle">
          <div class="item_middle_item_top">
            <span class="item_grade">{{ item.grade }}</span>
            <h1 class="item_title">
              {{ item.title }}
            </h1>
          </div>
          <div class="item_middle_item_bottom">
            <p class="item_info">
              {{ item.info }}
            </p>
          </div>
        </div>
        <div class="treasure_item_third">
          <p class="treasure_price">
            {{ item.priceType }} <span>￥{{ item.price }}</span>
          </p>
        </div>
        <div class="treasure_item_fourth" v-if="item.state === '待收货'">
          <span class="fuck_off_info">如需申请售后，请先确认收货</span>
        </div>
        <div class="treasure_item_fourth" v-if="item.state === '待支付'">
          <span class="fuck_off_info"
            >请在8小时内完成支付，否则订单失效，保证金无法退还</span
          >
        </div>
        <div class="treasure_item_bottom_other" v-if="item.state === '已取消'">
          <span class="fuck_off_info"
            >24小时内没有发货，订单失效，金额会退还到您的账户余额</span
          >
        </div>
        <div class="treasure_item_bottom" v-else>
          <span
            v-if="item.state === '待收货' || item.state === '待支付'"
            class="item_btn"
            >{{ item.btn }}</span
          >
          <p
            v-else-if="item.state === '已收货' || item.state === '已退货'"
            class="item_sell"
          >
            <span class="item_sell_info">售后完成: {{ item.sellInfo }}</span>
            <span class="go_detail">查看详情<van-icon name="arrow"/></span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "allTreasure",
  data() {
    return {
      /**
       * 物品型号顶部筛选
       */
      radio: 0, // 默认品类型号顶部筛选选中状态
      typeSelectItem: [
        { id: 1, value: "手机" },
        { id: 2, value: "平板" },
        { id: 3, value: "笔记本" },
        { id: 4, value: "其他数码" }
      ],
      /**
       * 物品型号底部筛选
       */
      items: [
        {
          // 导航名称
          text: "全部",
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "全部",
              // id，作为匹配选中状态的标识符
              id: 1
            },
            {
              text: "苹果 iPhone 7Plus",
              id: 2
            },
            {
              text: "苹果 iPhone 7Plus",
              id: 3
            }
          ]
        },
        {
          // 导航名称
          text: "苹果",
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "全部",
              // id，作为匹配选中状态的标识符
              id: 1
            },
            {
              text: "华为vxada1",
              id: 2
            },
            {
              text: "华为12",
              id: 3
            }
          ]
        },
        {
          // 导航名称
          text: "荣耀",
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "全部",
              // id，作为匹配选中状态的标识符
              id: 1
            },
            {
              text: "荣耀1asgd",
              id: 2
            },
            {
              text: "荣耀2sfds",
              id: 3
            }
          ]
        }
      ],
      activeId: 1,
      activeIndex: 0,
      /**
       * 物品等级筛选
       */
      gradeSelect: "All",
      /**
       * 物品状态筛选
       */
      goodsState: "全部状态",
      /**
       * 宝贝列表
       */
      treasureList: [
        {
          number: "1637175145164516",
          state: "待收货",
          grade: "A2",
          title: "产品标题产品标题产品标题产品标题adadada",
          info: "5300 11什么介绍什么介绍什么介绍什么介绍",
          priceType: "中标价",
          price: "1,213.00",
          btn: "查看物流",
          sellInfo: "退货成功"
        },
        {
          number: "1637175145164516",
          state: "已收货",
          grade: "A2",
          title: "产品标题产品标题产品标题产品标题adadada",
          info: "5300 11什么介绍什么介绍什么介绍什么介绍",
          priceType: "中标价",
          price: "1,213.00",
          btn: "查看物流",
          sellInfo: "退货失败"
        },
        {
          number: "1637175145164516",
          state: "已退货",
          grade: "A2",
          title: "产品标题产品标题产品标题产品标题adadada",
          info: "5300 11什么介绍什么介绍什么介绍什么介绍",
          priceType: "中标价",
          price: "1,213.00",
          btn: "查看物流",
          sellInfo: "退货成功"
        },
        {
          number: "1637175145164516",
          state: "待支付",
          grade: "A2",
          title: "产品标题产品标题产品标题产品标题adadada",
          info: "5300 11什么介绍什么介绍什么介绍什么介绍",
          priceType: "中标价",
          price: "1,213.00",
          btn: "去支付",
          sellInfo: "退货成功"
        },
        {
          number: "1637175145164516",
          state: "已取消",
          grade: "A2",
          title: "产品标题产品标题产品标题产品标题adadada",
          info: "5300 11什么介绍什么介绍什么介绍什么介绍",
          priceType: "中标价",
          price: "1,213.00",
          btn: "查看物流",
          sellInfo: "退货成功"
        }
      ]
    };
  },
  created() {},
  methods: {
    // 品类型号顶部筛选
    topSelect(e) {
      console.log(e, this.radio);
    },
    // 品类型号底部部筛选
    clickNav(index) {
      console.log(index);
    },
    clickItem(data) {
      console.log(data);
    },
    // 重置 确认
    resetBtn1() {
      this.activeIndex = 0;
      this.activeId = 1;
    },
    confirmBtn1() {
      console.log(this.activeIndex, this.activeId);
      this.$refs.item1.toggle();
    },

    // 物品等级按钮
    resetBtn2() {
      this.gradeSelect = "All";
    },
    confirmBtn2() {
      console.log(this.gradeSelect);
      this.$refs.item2.toggle();
    },

    // 物品状态按钮
    resetBtn3() {
      this.goodsState = "1";
    },
    confirmBtn3() {
      console.log(this.gradeSelect);
      this.$refs.item3.toggle();
    }
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.allTreasure {
  .header {
    height: 100px;
    .van-icon {
      font-size: 20px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    .van-nav-bar__title {
      height: 50px;
      line-height: 50px;
      font-size: 19px;
      font-family: SourceHanSansCN;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
    }
  }
  /* 下拉菜单 */
  .dropdown_menu {
    width: 100%;
    .dropdown_menu_navigation {
      .ropdown_menu_item {
        background: rgba(255, 255, 255, 1);
        /* 左边筛选 */
        .top_select_item {
          height: 120px;
          padding-bottom: 22px;
          .select_group {
            height: 100%;
            display: flex;
            justify-content: space-around;
            flex-direction: row;
            flex-wrap: nowrap;
            .item_tag {
              display: block;
              width: 150px;
              height: 58px;
              background: rgba(237, 237, 237, 1);
              border-radius: 29px;
              text-align: center;
              line-height: 58px;
              font-size: 24px;
              font-family: PingFang SC;
              font-weight: 500;
              color: rgba(51, 51, 51, 1);
            }
            .item_tag_checked {
              background: rgba(255, 240, 240, 1);
              color: rgba(255, 59, 62, 1);
            }
          }
        }
        .bottom_select_item {
          border-top: 1px solid rgba(206, 206, 206, 1);
          @{deep} .van-tree-select__nav {
            background: rgba(242, 242, 242, 1);
            .van-sidebar-item {
              text-align: center;
              line-height: 55px;
            }
          }
          @{deep} .van-sidebar-item--select {
            border-color: rgba(255, 59, 62, 1);
          }
          @{deep} .van-tree-select__content {
            padding-left: 16px;
            .van-ellipsis {
              text-align: center;
              line-height: 78px;
              border-bottom: 1px solid rgba(226, 226, 226, 1);
            }
          }
          @{deep} .van-tree-select__item--active {
            color: rgba(255, 59, 62, 1);
          }
        }
        .bottom_btn {
          width: 100%;
          height: 128px;
          background: rgba(250, 250, 250, 1);
          display: flex;
          justify-content: space-around;
          .select_btn {
            width: 260px;
            height: 58px;
            line-height: 58px;
            margin-top: 35px;
            font-family: SourceHanSansCN;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            background: rgba(255, 59, 62, 1);
            border-radius: 29px;
          }
          .reset {
            background: rgba(250, 250, 250, 1);
            border: 2px solid rgba(51, 51, 51, 1);
            color: rgba(51, 51, 51, 1);
          }
        }
        /* 右边筛选 */
        .grade_select_item {
          width: 100%;
          height: 200px;
          padding: 0 43px;
          border-top: 1px solid rgba(206, 206, 206, 1);
          .grade_select_content {
            width: 100%;
            padding-top: 66px;
            height: 68px;
            line-height: 68px;
            .grade_select_text {
              float: left;
              margin-right: 66px;
              font-size: 34px;
              font-family: PingFang SC;
              font-weight: bold;
              color: rgba(51, 51, 51, 1);
            }
            .grade_select_input {
              float: left;
              border-radius: 9px;
              .grade_select_input_price {
                width: 200px;
                background: rgba(250, 250, 250, 1);
                border-radius: 9px;
                border: 1px solid rgba(193, 193, 193, 1);
              }
            }
            .grade_select_icon {
              float: left;
              font-size: 26px;
              width: 26px;
              height: 3px;
            }
          }
        }
        /* 中间筛选 */
        .class_select_content {
          // height: 616px;
          width: 100%;
          padding: 0 27px;
          .class_select_group {
            .class_select_item {
              height: 90px;
            }
          }
        }
      }
      @{deep} .van-dropdown-menu__title {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
  .section {
    padding: 70px 30px;
    .treasure_container {
      width: 100%;
      background: rgba(255, 255, 255, 1);
      border-radius: 9px;
      margin-bottom: 30px;
      padding-top: 30px;
      .treasure_item_top {
        height: 65px;
        padding: 0 30px;
        border-bottom: 2px dotted rgba(226, 226, 226, 1);
        .treasure_number {
          float: left;
          font-size: 26px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
        }
        .treasure_state {
          float: right;
          font-size: 26px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(255, 59, 62, 1);
        }
      }
      .treasure_item_middle {
        width: 100%;
        height: 157px;
        padding: 0 30px;
        padding-top: 30px;
        border-bottom: 2px dotted rgba(226, 226, 226, 1);
        .item_middle_item_top {
          height: 42px;
          font-family: SourceHanSansCN;
          .item_grade {
            float: left;
            width: 80px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            background: #ff3b3e;
            border-radius: 21px;
            font-size: 24px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
          }
          .item_title {
            float: left;
            width: 387px;
            margin-left: 20px;
            line-height: 42px;
            font-size: 28px;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .item_info {
          margin-top: 25px;
          height: 23px;
          font-size: 24px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
        }
      }
      .treasure_item_third {
        width: 100%;
        height: 128px;
        padding: 0 30px;
        line-height: 128px;
        border-bottom: 2px dotted rgba(226, 226, 226, 1);
        .treasure_price {
          width: 100%;
          font-size: 26px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          span {
            font-size: 34px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: rgba(51, 51, 51, 1);
          }
        }
      }
      .treasure_item_fourth {
        width: 100%;
        height: 78px;
        line-height: 78px;
        background: rgba(255, 59, 62, 0.08);
        padding-left: 30px;
        .fuck_off_info {
          font-size: 24px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(255, 59, 62, 1);
        }
      }
      .treasure_item_bottom_other {
        width: 100%;
        height: 78px;
        line-height: 78px;
        background: rgba(255, 59, 62, 0.08);
        padding-left: 30px;
        .fuck_off_info {
          font-size: 24px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(255, 59, 62, 1);
        }
      }
      .treasure_item_bottom {
        height: 78px;
        line-height: 78px;
        padding: 0 30px;
        .item_btn {
          float: right;
          width: 150px;
          height: 58px;
          text-align: center;
          margin-top: 12px;
          line-height: 58px;
          border: 2px solid rgba(51, 51, 51, 1);
          border-radius: 29px;
        }
        .item_sell {
          width: 100%;
          .item_sell_info {
            float: left;
            font-size: 26px;
            font-family: SourceHanSansCN;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
          }
          .go_detail {
            float: right;
            height: 26px;
            font-size: 26px;
            font-family: SourceHanSansCN;
            font-weight: 400;
            color: rgba(193, 193, 193, 1);
          }
        }
      }
    }
  }
}
</style>
